import React, { useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import ModalWrapper from "@/components/ModalWrapper";
import Close from "@/media/sidebar/close.png";
import Warning from "@/media/sidebar/warning.png";
const noop = () => false;
const noData = () => {};
export default function RemoveModals({
  hideModal = noop,
  handleModal = noData,
  closeModal = noData,
  title = "",
  content = "",
}) {
  const formEl = useRef(null);
  const { t } = useTranslation();
  return (
    <ModalWrapper isOpen={true}>
      <div
        className="w-[320px] bg-theme-bg-secondary shadow overflow-hidden rounded-[12px]"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="relative px-[16px] pt-[12px]">
          <div className="w-full flex gap-x-2 items-center">
            <h3 className="text-sm font-semibold overflow-hidden overflow-ellipsis whitespace-nowrap add-space-title">
              {t("remove.title")}
            </h3>
          </div>
          <button
            onClick={() => {
              hideModal();
              closeModal();
            }}
            type="button"
            className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
          >
            <img src={Close} alt="Close" className="w-[20px]" />
          </button>
        </div>
        <div
          className="h-full w-full overflow-y-auto"
          style={{ maxHeight: "calc(100vh - 200px)" }}
        >
          <form ref={formEl}>
            <div className="pb-[20px] pt-[10px]  px-[16px] flex flex-col items-center text-center">
              <img src={Warning} alt="Warning" className="w-[32px] mb-[8px]" />
              <div className="w-full flex flex-col text-sm remove-text">
                <div>
                  {title}
                  <br></br>
                  {content}
                </div>
              </div>
            </div>
            <div className="flex w-full justify-center items-center pb-[24px]">
              <button
                onClick={(e) => {
                  e.stopPropagation();
                  e.preventDefault();
                  closeModal();
                  hideModal();
                }}
                type="submit"
                className="transition-all duration-300 font-semibold mr-[8px] rounded-[100px] text-sm px-[40px] py-[8px] space-submit-btn space-remove-btn"
              >
                取消
              </button>

              <button
                onClick={handleModal}
                type="submit"
                className="transition-all duration-300 font-semibold rounded-[100px] text-sm px-[40px] py-[8px] space-submit-btn space-remove-btn remove-btn"
              >
                确定
              </button>
            </div>
          </form>
        </div>
      </div>
    </ModalWrapper>
  );
}

// eslint-disable-next-line react-refresh/only-export-components
export function useRemoveModal() {
  const [showingRemove, setShowingRemove] = useState(false);
  const showRemoveModal = () => {
    setShowingRemove(true);
  };
  const hideRemoveModal = () => {
    setShowingRemove(false);
  };

  return { showingRemove, showRemoveModal, hideRemoveModal };
}
